<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Resultaten</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </h:head>
    <h:body>

        <ui:include src="/navigatie.xhtml" />
        <h:form> 
            <div class="row">
                <div class="col-md-4">
                    <h:selectOneMenu
                        id="klassen"
                        label="Klas"
                        value="#{dataController.selectedKlas}"
                        class="form-control">
                        <f:selectItem itemValue="Selecteer een klas" />
                        <f:selectItems var="klas" value="#{dataController.alleKlassen}" itemValue="#{klas.id}" />

                        <f:ajax event="change" 
                                render="vakken"
                                execute="@this"
                                />
                    </h:selectOneMenu>
                </div>
                <div class="col-md-4">
                    <h:selectOneMenu
                        id="vakken"
                        label="Vak"
                        value="#{dataController.selectedVak}"
                        class="form-control">
                        <f:selectItem itemValue="Selecteer een vak" />
                        <f:selectItems var="vak" value="#{dataController.getAlleVakkenFromKlas()}" itemValue="#{vak.id}" />

                        <f:ajax event="change" 
                                render="testen"
                                execute="@this"
                                />
                    </h:selectOneMenu>
                </div>
                <div class="col-md-4">
                    <h:selectOneMenu
                        id="testen"
                        label="Test"
                        value="#{dataController.selectedTest}"
                        class="form-control">
                        <f:selectItem itemValue="Selecteer een test" />
                        <f:selectItems var="test" value="#{dataController.getAlleTesten()}" itemValue="#{test.id}" />
                        <f:ajax event="change" 
                                render="resultaten gemiddelde"
                                execute="@this"
                                />
                    </h:selectOneMenu>
                </div>
            </div>

            <h:dataTable id="resultaten" var="score" value="#{dataController.getAlleScores()}" class="table">
                
                <h:column>    				
                    <f:facet name="header">R-nummer student</f:facet>    				
                    <a href="studentInfo.xhtml?id=#{score.studentId}">#{dataController.getStudent(score.studentId).studentNr}</a>
                </h:column>
                <h:column>    				
                    <f:facet name="header">Naam student</f:facet>    				
                        #{dataController.getStudent(score.studentId).naam}
                </h:column>
                <h:column>
                    <f:facet name="header">Score</f:facet>
                    #{score.score} / #{dataController.test.totaal}
                </h:column>
            </h:dataTable>

            <table id="statistieken" class="table">
                <thead>
                    <tr><th>Statistieken</th></tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gemiddelde: <h:outputText id="gemiddelde" value="#{dataController.gemiddelde}" />%</td>
                    </tr>
                </tbody>
            </table>
            <div class="btn-group-vertical">
                <h:commandButton value="Download resultaten test" action="#{dataController.genereerPDFTest()}" class="btn btn-primary" ></h:commandButton>
                <h:commandButton value="Download resultaten vak" action="#{dataController.genereerPDFVak()}" class="btn btn-primary" ></h:commandButton>
                <h:commandButton value="Download resultaten klas" action="#{dataController.genereerPDFKlas()}" class="btn btn-primary"></h:commandButton>
            </div>
        </h:form>
    </h:body>
</html>
